<template>
  <div class="app-container form-demo">
    <el-card class="box-card" shadow="always" v-show="showSearch">
      <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
        <el-form-item label="方案名称" prop="schemeName">
          <el-input v-model="queryParams.schemeName" placeholder="请输入方案名称" clearable @keyup.enter="handleQuery" />
        </el-form-item>
        <el-form-item label="制单人" prop="preparedId">
          <el-select
            v-model="queryParams.preparedId"
            filterable
            clearable
            remote
            reserve-keyword
            placeholder="请选择制单人"
            :loading="loading"
            @change="handleQuery"
          >
            <el-option v-for="item in userList" :key="item.value" :label="item.nickName" :value="item.userId" />
          </el-select>
        </el-form-item>
        <el-form-item label="方案日期">
          <el-date-picker
            v-model="dateRange"
            style="width: 100%"
            value-format="YYYY-MM-DD"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery">搜索</el-button>
          <el-button @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="box-card" shadow="always" :body-style="{ padding: '20px' }">
      <!-- <div slot="header">
            <span></span>
        </div> -->
      <!-- card body -->
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button type="primary" @click="handleAdd" v-hasPermi="['order:quotationScheme:add']">添加报价方案 </el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button type="danger" :disabled="!multiple" @click="handleBatchDelete" v-hasPermi="['order:quotationScheme:remove']">删除 </el-button>
        </el-col>
        <right-toolbar :v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
      </el-row>

      <el-table ref="table" border v-loading="loading" :data="dataSource" @selection-change="handleSelectionChange" @row-dblclick="dbclick">
        <el-table-column type="selection" width="55" align="center" :selectable="selectHandle" />
        <el-table-column label="#" type="index"> </el-table-column>
        <el-table-column label="方案名称" align="center" prop="schemeName" />
        <el-table-column label="方案日期" align="center" prop="schemeTime" width="180" />
        <el-table-column label="商品数量" align="center" prop="goodsNo" />
        <el-table-column label="平均单价" align="center" prop="averagePrice" />
        <el-table-column label="金额" align="center" prop="price" />
        <el-table-column label="关联状态" align="center" prop="flag">
          <template #default="scope">
            <el-tag v-if="scope.row.flag == 1" type="success">已关联</el-tag>
            <el-tag v-else type="danger">未关联</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="制单人" align="center">
          <template #default="scope">
            {{ (scope.row.sysUserVo && scope.row.sysUserVo.nickName) || '' }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" prop="orderStatus">
          <template #default="scope">
            <el-button type="text" @click="handleLink(scope.row)" v-if="scope.row.flag" v-hasPermi="['order:quotationScheme:link']">关联</el-button>
            <el-button type="text" @click="handleEdit(scope.row)" v-hasPermi="['order:quotationScheme:edit']">编辑</el-button>
            <el-button type="text" @click="handleDelete(scope.row.id)" v-hasPermi="['order:quotationScheme:remove']">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page.sync="queryParams.pageNum"
        v-model:limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </el-card>
    <addForm ref="modelForm" @ok="getList"></addForm>
    <quotationListDialog ref="quotationListDialog" @ok="getList"></quotationListDialog>
  </div>
</template>

<script>
import addForm from './modules/addForm.vue';
import quotationListDialog from './modules/quotationListDialog.vue';
import listMixin from '@/mixins/listMixin';
export default {
  name: 'quote',
  dicts: ['inventory_status', 'counting_method'],
  components: {
    addForm,
    quotationListDialog
  },
  mixins: [listMixin],
  data() {
    return {
      queryParams: {
        // Query parameters for the table
        orderNo: '', // 方案名称
        creator: '', // 制单人
        pageNum: 1,
        pageSize: 10
      },
      dateRange: [], // Date range for the created time
      urls: {
        list: '/order/quotationScheme/list',
        delete: '/order/quotationScheme'
      }
    };
  },

  mounted() {
    this.listSysUser();
  },
  methods: {
    getQueryParams() {
      let params = Object.assign({}, this.queryParams);
      params.params = { ...this.params };
      if (this.dateRange && this.dateRange.length) {
        params.params['beginCreateTime'] = this.dateRange[0] + ' 00:00:00';
        params.params['endCreateTime'] = this.dateRange[1] + ' 23:59:59';
      }
      return params;
    },
    handleLink(row) {
      this.$refs.quotationListDialog.show(row);
    },

    /**
     * @重置查询条件
     */
    resetQuery() {
      this.queryParams = {
        //查询条件
        pageNum: 1,
        pageSize: 10
      };
      this.dateRange = []; //日期范围
      this.getList();
    }
  }
};
</script>
<style type="text/css" scoped>
.box-card {
  margin-top: 10px;
}
</style>
<style type="text/css">
.form-demo .el-form-item .el-form-item__content {
  width: 215px;
}
</style>